<template>
	<view>
		<view class="status_bar"></view> 
		<view class="my-container">
			<view class="my-background"></view>
			<view class="mine-wrap">
				<view class="mine-info-container mb-20">
					<view class="mine-user-wrap">
						<view class="mine-user-avatar">
							<image :src="avatar" style="width: 48px;height: 48px;border-radius: 25px;"></image>
						</view>
						<view class="mine-user-address-wrap">
							<view class="mine-user-address" @click="addressMange"><image src="/static/img/my/address.png" style="width: 16px;height: 16px;"></image><text>地址管理</text></view>
						</view>
					</view>
					<view class="mine-logistics-wrap">
						<view class="mine-good-num" @click="goBoxCabinet">
							<view>{{userInfo.quantity}}</view>
							<view>商品数</view>
						</view>
						<view class="mine-currency" @click="goHandsel">
							<view>{{userInfo.gold}}</view>
							<view>赠送币</view>
						</view>
						<view class="mine-overage" @click="goBalance">
							<view>{{userInfo.balance}}</view>
							<view>余额</view>
						</view>
					</view>
				</view>
				<view class="mine-order-container mb-20">
					<view class="mine-order-nav">
						<view>我的订单</view>
						<view @click="goAllOrder(0)">查看所有>></view>
					</view>
					<view class="mine-order-wrap">
						<view class="mine-order-forwarding" @click="goAllOrder(0)">
							<view><image src="/static/img/my/forwarding.png" style="width: 32px;height: 32px;"></image></view>
							<view>待发货</view>
						</view>
						<view class="mine-order-receipt" @click="goAllOrder(1)">
							<view><image src="/static/img/my/receipt.png" style="width: 32px;height: 32px;"></image></view>
							<view>待收货</view>
						</view>
						<view class="mine-order-completed" @click="goAllOrder(2)">
							<view><image src="/static/img/my/completed.png" style="width: 32px;height: 32px;"></image></view>
							<view>已完成</view>
						</view>
					</view>
				</view>
				<view class="mine-sign-container mb-10">
					<view class="mine-menu-item" @click="goSign">
						<view class="mine-menu-title"><image src="/static/img/my/sign.png" style="width: 32px;height: 32px;margin-right: 5px;">签到中心</view>
						<view><image src="/static/img/my/right.png" style="width: 32px;height: 32px;"></view>
					</view>
				</view>
				<view class="mine-other-container">
					<view class="mine-menu-item" @click="goCoupon">
						<view class="mine-menu-title"><image src="/static/img/my/coupon.png" style="width: 32px;height: 32px;margin-right: 5px;">优惠卷</view>
						<view><image src="/static/img/my/right.png" style="width: 32px;height: 32px;"></view>
					</view>
					<view class="mine-menu-item" @click="goIntegral">
						<view class="mine-menu-title"><image src="/static/img/my/exchange.png" style="width: 32px;height: 32px;margin-right: 5px;">积分记录</view>
						<view><image src="/static/img/my/right.png" style="width: 32px;height: 32px;"></view>
					</view>
					<view class="mine-menu-item" @click="goService">
						<view class="mine-menu-title"><image src="/static/img/my/service.png" style="width: 32px;height: 32px;margin-right: 5px;">联系客服</view>
						<view><image src="/static/img/my/right.png" style="width: 32px;height: 32px;"></view>
					</view>
					<view class="mine-menu-item" @click="goFeedback">
						<view class="mine-menu-title"><image src="/static/img/my/suggest.png" style="width: 32px;height: 32px;margin-right: 5px;">投诉建议</view>
						<view><image src="/static/img/my/right.png" style="width: 32px;height: 32px;"></view>
					</view>
					<view class="mine-menu-item" @click="goSetting">
						<view class="mine-menu-title"><image src="/static/img/my/setting.png" style="width: 32px;height: 32px;margin-right: 5px;">设置</view>
						<view><image src="/static/img/my/right.png" style="width: 32px;height: 32px;"></view>
					</view>
					<view style="width: 100%;height:calc(var(--window-bottom) + 20px);"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appUrl:this.$store.state.vuex_config.appUrl,
				userInfo:{},
				//用户头像
				avatar:'/static/img/logo.png',
			}
		},
		onLoad(){
			debugger
			if(this.$utils.isNotEmpty(this.$store.state.vuex_user.avatar)){
				debugger
				this.avatar = this.appUrl + this.$store.state.vuex_user.avatar;
			}
		},
		onShow(){
			this.getUserInfo();
		},
		methods: {
			getUserInfo(){
				this.$u.api.user.info().then(res => {
					if (res.code == 200){
						this.userInfo=res.data;
					}
				});
			},
			addressMange(){
				uni.navigateTo({
					url: 'pages/mine/ship_address'
				})
			},
			goIntegral(){
				uni.navigateTo({
					url: 'pages/mine/integral'
				})
			},
			goSign(){
				uni.navigateTo({
					url: 'pages/mine/sign_in'
				})
			},
			goCoupon(){
				uni.navigateTo({
					url: 'pages/mine/coupon'
				})
			},
			goBoxCabinet(){
				uni.reLaunch({
					url: '/pages/boxcabinet/boxcabinet'
				});
			},
			goHandsel(){
				uni.navigateTo({
					url: 'pages/mine/sign_in'
				})
			},
			goBalance(){
				uni.navigateTo({
					url: 'pages/mine/recharge'
				})
			},
			goAllOrder(current){
				uni.navigateTo({
					url: 'pages/mine/order?current='+current
				})
			},
			goService(){
				uni.navigateTo({
					url: 'pages/mine/service'
				})
			},
			goSetting(){
				uni.navigateTo({
					url: 'pages/mine/setting'
				})
			},
			goFeedback(){
				uni.navigateTo({
					url: 'pages/mine/feedback'
				})
			}
		}
	}
</script>

<style lang="scss">
.status_bar {
	width: 100%;
	height: var(--status-bar-height);
}
.my-container{
	.mine-wrap{
		position: fixed;
		top: var(--status-bar-height);
		position: absolute;
		width: 100%;
		padding: 20px;
		.mine-info-container{
			background: #FFFFFF;
			height: 170px;
			border-radius: 25px;
			.mine-user-wrap{
				display: flex;
				flex-direction: row;
				justify-content: space-between; /* 横向中间自动空间 */
				align-content: space-between;  /* 竖向中间自动空间 */
				padding: 20px 0 20px 20px;
				.mine-user-avatar{
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					border: 2px solid #2e73ff;
				}
				.mine-user-address-wrap{
					display: flex;
					justify-content: center;
					align-items: center;
					.mine-user-address{
						height: 30px;
						background: #FFA200;
						border-radius: 25px 0 0 25px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
			.mine-logistics-wrap{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 20px 0 20px;
				.mine-good-num{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}
				.mine-currency{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}
				.mine-overage{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}
			}
		}
		.mine-order-container{
			background: #FFFFFF;
			height: 120px;
			border-radius: 25px;
			padding: 20px;
			.mine-order-nav{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
			.mine-order-wrap{
				display: flex;
				flex-wrap: row;
				justify-content: space-between;
				margin-top: 20px;
				.mine-order-forwarding{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}
				.mine-order-forwarding{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}
				.mine-order-completed{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
				}
			}
		}
		.mine-sign-container{
			background: #FFFFFF;
			border-radius: 10px;
			.mine-menu-item{
				width: 100%;
				height: 60px;
				border-bottom: 0.5px solid #f2f2f2;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.mine-menu-title{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
			}
		}
		.mine-other-container{
			background: #FFFFFF;
			height: 300px;
			border-radius: 10px;
			.mine-menu-item{
				width: 100%;
				height: 60px;
				border-bottom: 0.5px solid #f2f2f2;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.mine-menu-title{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	.my-background{
		background-color: #2e73ff;
		height: 280px;
		width: 100%;
	}

}

</style>
